/** @jsxImportSource @emotion/react */
import {
  InputGroup,
  Select,
  Input,
  TextArea,
  Check,
  InputDatalist,
  CheckSwitch,
  SuffixInput,
  InputLine
} from "../Form";
import { Text } from "../Text";
import { Button } from "../Button";
import theme from "../Theme";
import { Layer } from "../Layer";
import { storiesOf } from "@storybook/react";
import { IconArrowRight, IconAlignCenter } from "../Icons";
import { IconButton } from "../IconButton";
import * as React from "react";
import { ComboBoxDatalist, } from "../ComboBoxDatalist";
import { LineColumn} from "../LineColumn";
import {  css } from "@emotion/react";


export const FormStories = storiesOf("LineColumn", module)
  .add("列式布局LineColumn", () => {
      const [query, setQuery] = React.useState('初始' );
      const [大修周期, set大修周期] = React.useState(`12`);
      const [isCar, setisCar] = React.useState(undefined);
      const [船梯, set船梯] = React.useState(undefined);
      const toRender = ["实际vals","asdsafasdcomfsdfdffsdfsdf"];
      return(
          <div
              css={{
                display: "flex",
                justifyContent: "center",
                paddingTop: theme.spaces.xl,
                paddingBottom: theme.spaces.xl
              }}
          >
            <Layer css={{ width: "100%" }} elevation={"lg"}>
              <form css={{ padding: theme.spaces.lg }}>
                <LineColumn column={5}
                >
                  <Text>任意的文本LineColumn 测试：h水电费看</Text>
                  <InputLine label="Gender横着">
                    <Select>
                      <option>Male</option>
                      <option>Female</option>
                      <option>Other</option>
                    </Select>
                  </InputLine>
                  <InputLine  label='第三个儿子' helpText={'说明等等4从vv'}>
                    <SuffixInput
                        type="number"
                        value={ 大修周期 || ''}
                        onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                    >月</SuffixInput>
                  </InputLine>
                  <InputLine  label="第4个框">
                    <InputDatalist placeholder="可输入也可选择"
                                   value={ query }
                                   onListChange={v => setQuery(v)}
                                   datalist={["实际vals","asdsafasdcomfsdfdffsdfsdf"]}
                    >
                    </InputDatalist>
                  </InputLine>
                    <InputLine label="报错的Gender，进行样式测试用">
                        <div css={{
                            flex: '1 1 20%',
                            backgroundColor: 'grey'
                        }}
                        >
                            <Check label="Male" checked />
                            <Check label="Female" />
                            <Check label="Other" />
                        </div>
                    </InputLine>
                  <InputLine label="是不是船梯" helpText={'dfgf从vv'}>
                    <CheckSwitch  checked= {船梯 || false}
                                  onChange={e => set船梯(船梯? undefined:true) } />
                  </InputLine>
                  <InputLine  label='what about得接 报告,内部的:' helpText={'说明等等4从vv'}>
                    <SuffixInput
                        type="number"
                        value={ 大修周期 || ''}
                        onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                    >个月</SuffixInput>
                  </InputLine>
                  <InputLine error="输入错" label="第二种两个做法ComboBoxDatalist的组合框">
                    <ComboBoxDatalist placeholder="可输入也可选择"
                                   value={ query }
                                   onListChange={v => setQuery(v)}
                                   datalist={["说得好","asdsafasdcomfsdfdffsdfsdf"]}
                    >
                    </ComboBoxDatalist>
                  </InputLine>

                  <InputLine error="This field is required" label="Gender multiple">
                    <Select multiple>
                      <option>Male</option>
                      <option>Female</option>
                      <option>Other</option>
                    </Select>
                  </InputLine>

                  <InputLine label="Look是船梯" helpText={'dfgf从vv'}>
                    <CheckSwitch  checked= {船梯 || false}
                                  onChange={e => set船梯(船梯? undefined:true) } />
                  </InputLine>

                  <InputLine  label='第二版本获得接报告,内部的:' helpText={'说明等等4从vv'}>
                    <SuffixInput
                        type="number"
                        value={ 大修周期 || ''}
                        onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                    >个月</SuffixInput>
                  </InputLine>

                  <InputLine
                      label="Example textarea"
                      helpText="Please provide a brief description of yourself. This will go on your profile."
                  >
                    <TextArea placeholder="Something textarea" />
                  </InputLine>
                  <InputLine label="进行样式测试用">
                      <Check label="单独一个的" />
                  </InputLine>


                  <InputLine helpText="Required field" label="Email yourselfdescriptionaddress profile">
                    <Input type={'file'} placeholder="最基本的 input" />
                  </InputLine>
                    <InputLine label={`放行意见:`} css={{
                    }}>
                        <Text css={{textAlign: "left"}}>个做fanfax东华师ngbfa大和infan二种两法ComboBoxDatalist的组合</Text>
                    </InputLine>
                </LineColumn>
                <div css={{ textAlign: "right", marginTop: `${theme.spaces.md}` }}>
                  <Button intent="primary">Submit</Button>
                </div>
              </form>
            </Layer>
          </div>
      ) ;
    } )
.add("布局紧凑", () => {
    const [query, setQuery] = React.useState('初始' );
    const [大修周期, set大修周期] = React.useState(`12`);
    const [isCar, setisCar] = React.useState(undefined);
    const [船梯, set船梯] = React.useState(undefined);
    const toRender = ["实际vals","asdsafasdcomfsdfdffsdfsdf"];
    return(
        <div
            css={{
                display: "flex",
                justifyContent: "center",
                paddingTop: theme.spaces.xl,
                paddingBottom: theme.spaces.xl
            }}
        >
            <Layer css={{ width: "100%" }} elevation={"lg"}>
                <form css={{ padding: theme.spaces.lg }}>
                    <LineColumn column={5} breaks={[170,290,390,490,750]}
                    >
                        <Text>任意的文本LineColumn 测试：h水电费看</Text>
                        <InputLine label="Gender横着">
                            <Select>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>
                        <InputLine  label='第三个儿子' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >月</SuffixInput>
                        </InputLine>
                        <InputLine  label="第4个框">
                            <InputDatalist placeholder="可输入也可选择"
                                           value={ query }
                                           onListChange={v => setQuery(v)}
                                           datalist={["实际vals","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </InputDatalist>
                        </InputLine>
                        <InputLine label="报错的Gender，进行样式测试用">
                            <div css={{
                                flex: '1 1 20%',
                                backgroundColor: 'grey'
                            }}
                            >
                                <Check label="Male" checked />
                                <Check label="Female" />
                                <Check label="Other" />
                            </div>
                        </InputLine>
                        <InputLine label="是不是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>
                        <InputLine  label='what about得接 报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>
                        <InputLine error="输入错" label="第二种两个做法ComboBoxDatalist的组合框">
                            <ComboBoxDatalist placeholder="可输入也可选择"
                                              value={ query }
                                              onListChange={v => setQuery(v)}
                                              datalist={["说得好","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </ComboBoxDatalist>
                        </InputLine>

                        <InputLine error="This field is required" label="Gender multiple">
                            <Select multiple>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>

                        <InputLine label="Look是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>

                        <InputLine  label='第二版本获得接报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>

                        <InputLine
                            label="Example textarea"
                            helpText="Please provide a brief description of yourself. This will go on your profile."
                        >
                            <TextArea placeholder="Something textarea" />
                        </InputLine>
                        <InputLine label="进行样式测试用">
                            <Check label="单独一个的" />
                        </InputLine>


                        <InputLine helpText="Required field" label="Email yourselfdescriptionaddress profile">
                            <Input type={'file'} placeholder="最基本的 input" />
                        </InputLine>
                        <InputLine label={`放行意见:`} css={{
                        }}>
                            <Text css={{textAlign: "left"}}>个做fanfax东华师ngbfa大和infan二种两法ComboBoxDatalist的组合</Text>
                        </InputLine>
                    </LineColumn>
                    <div css={{ textAlign: "right", marginTop: `${theme.spaces.md}` }}>
                        <Button intent="primary">Submit</Button>
                    </div>
                </form>
            </Layer>
        </div>
    ) ;
} );
